<template>
  <div id="app">
    <el-container style="height: 1000px;">
  <el-aside width="200px">
    <el-row>
   <el-collapse v-model="activeName" accordion>
    <el-row>
      <el-divider></el-divider>
      <el-button type="text" style="background-color: white;width: 100%;" @click="gdsy(null)">归档首页</el-button>
      <el-divider></el-divider>
    </el-row>
  <el-collapse-item name="1">
    <template slot="title"><i class="el el-font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所有权归档</i></template>
    <el-row>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('所有权初始登记')">所有权初始登记</el-button>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('所有权转移登记')">所有权转移登记</el-button>
    </el-row>
  </el-collapse-item>
  <el-collapse-item name="2">
    <template slot="title"><i class="el el-font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他项权归档</i></template>
    <el-row>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('抵押登记')">一般抵押/最高抵押</el-button>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('抵押注销')">抵押注销</el-button>
    </el-row>
  </el-collapse-item>
  <el-collapse-item name="3">
    <template slot="title"><i class="el el-font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预告</i></template>
    <el-row>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('所有权转移预告登记')">所有权转移预告登记</el-button>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('预购商品房预告登记')">预购商品房预告登记</el-button>
      <el-divider></el-divider>
      <el-button type="text"  @click="gdsy('预告注销登记')">预告注销登记</el-button>
      <el-divider></el-divider>
      <el-button type="text" @click="gdsy('预购商品房抵押预告登记')">预购商品房抵押预告登记</el-button>
      <el-divider></el-divider>
      <el-button type="text" @click="gdsy('预购商品房抵押登记')">预购商品房抵押登记</el-button>
    </el-row>
  </el-collapse-item>
  <el-collapse-item name="4">
    <template slot="title"><i class="el el-font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;查封</i></template>
    <el-row>
      <el-divider></el-divider>
      <el-button type="text" @click="gdsy('查封登记')">查封登记</el-button>
      <el-divider></el-divider>
      <el-button type="text" @click="gdsy('查封注销')">解除查封</el-button>
    </el-row>
  </el-collapse-item>
  <el-collapse-item title="更正和异议" name="5">
    <template slot="title"><i class="el el-font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更正和异议</i></template>
    <el-row>
      <el-divider></el-divider>
      <el-button type="text" @click="gdsy('异议登记')">异议登记</el-button>
      <el-divider></el-divider>
      <el-button type="text" @click="gdsy('异议注销')">异议注销</el-button>
    </el-row>
  </el-collapse-item>
</el-collapse>
    </el-row>
</el-aside>
<el-container>
  <el-header style="height: 10%;">
    <template style="width: 100%;">
      <el-row style="width: 23%;margin-left: 5%;float: left;">
        <div style="width: 30%;float: left;font-size: 75%;">姓名：</div><el-input v-model="likefiles.proposerName" size="small" placeholder="请输入内容" style="width: 70%;float: left;" :clearable="true"></el-input>
      </el-row>
      <el-row style="width: 23%;margin-left: 5%;float: left;">
        <div style="width: 30%;float: left; font-size: 75%">身份证号：</div><el-input v-model="likefiles.proposerCard" size="small" placeholder="请输入内容" style="width: 70%;float: left;" :clearable="true"></el-input>
      </el-row>
      <el-row style="width: 23%;margin-left: 5%;float: left;">
        <div style="width: 30%;float: left; font-size: 75%">日期：</div>
        <el-date-picker
          v-model="likefiles.businessNum"
          align="right"
          type="datetime"
          size="small"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          style="width: 70%;float: left;" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-row>
      <el-row style="width: 10%;float: left;margin-left: 3%;">
        <el-button type="success" icon="el-icon-search" size="small" circle style="float: left;margin-top: 20%;" @click="loadFiles"></el-button>
        <el-button icon="el-icon-close" size="small" circle style="float: left;margin-top: 20%;" @click="filesEixt"></el-button>
      </el-row>
    </template>
  </el-header>
  <el-main>
    <template>
  <el-table
    :data="FileList"
    border
    style="width: 100%">
    <el-table-column
      prop="demurTypeName"
      label="业务类型">
    </el-table-column>
    <el-table-column
      prop="precontractStatus"
      label="业务状态">
    </el-table-column>
    <el-table-column
      prop="proposerName"
      label="申请人">
    </el-table-column>
    <el-table-column
      prop="proposerCard"
      label="身份证件号码/机关宗号">
    </el-table-column>
    <el-table-column
      prop="businessNum"
      label="入库时间">
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.likefiles.pageNow"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="this.likefiles.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
      style="margin-left: 20%;">
    </el-pagination>
</template>
  </el-main>
</el-container>
</el-container>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        FileList: [],
        likefiles:{
          proposerName:'',
          proposerCard:'',
          businessNum:'',
          demurTypeName:"",
          pageSize: 5,
          pageNow: 1,
          precontractStatus:'<已受理>'
        },
        total:'',
      };
    },
    methods:{
      loadFiles() {
        this.$axios.post("/register-serv/files/selectAll",this.likefiles).then((res) => {
          this.FileList = res.data.data.list;
          this.total = res.data.data.total;
        });
      },
      gdsy(val){
        this.likefiles.demurTypeName= val;
        this.likefiles.businessNum='';
        this.likefiles.proposerCard='';
        this.likefiles.proposerName='';
        this.likefiles.pageNow=1;
        this.likefiles.pageSize=5;
        this.loadFiles();
      },
      handleSizeChange(val) {
      this.likefiles.pageSize = val;
      this.loadFiles();
      },
      handleCurrentChange(val) {
        this.likefiles.pageNow = val;
        this.loadFiles();
      },
      filesEixt(){
        this.likefiles.businessNum='';
        this.likefiles.proposerCard='';
        this.likefiles.demurTypeName='';
        this.likefiles.proposerName='';
        this.likefiles.pageNow=1;
        this.likefiles.pageSize=5;
        this.loadFiles();
      }
    },
    mounted() {
      this.loadFiles();
    },
}
</script>

<style scoped>
 .el-header{
    border: 1px solid rgb(207, 207, 208);
    background-color:rgb(233,238,243);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-divider{
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 30px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: left;
    float: left;
    line-height: 20px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
